<template>
    <section class="contact-detail-wrapper">
        <section v-show="chatState.newRequestList.length">
            <section v-for="i of chatState.newRequestList" :key="i.id" class="request-friends-list">
                <ContactItem :userDetail="i" :isHiddenText="false" />
                <section>
                    <el-button type="primary" size="small" @click="reauestValidata(i, 2)">同意</el-button>
                    <el-button type="danger" size="small" @click="reauestValidata(i, 1)">拒绝</el-button>
                </section>
            </section>
        </section>
        <section v-show="!chatState.newRequestList.length" style="text-align: center; margin-top: 100px; font-weight:normal; color:#888">
            <el-icon size="88">
                <svg style="max-height:100px; min-height: 128px" t="1723700868991" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5660" width="128" height="128"><path d="M212.992 170.496h483.84c7.68 0 14.336-6.144 14.336-14.336 0-7.68-6.144-14.336-14.336-14.336H212.992c-7.68 0-14.336 6.144-14.336 14.336 0 8.192 6.656 14.336 14.336 14.336zM212.992 384h284.672c7.68 0 14.336-6.144 14.336-14.336s-6.144-14.336-14.336-14.336H212.992c-7.68 0-14.336 6.144-14.336 14.336s6.656 14.336 14.336 14.336z" fill="#dbdbdb" p-id="5661"></path><path d="M397.824 813.056c-2.048-1.536-5.12-2.56-7.68-2.56H141.824c-15.872 0-28.672-12.8-28.672-28.672V56.832c0-15.872 12.8-28.672 28.672-28.672h625.664c15.872 0 28.672 12.8 28.672 28.672v458.752c0 1.536 0.512 3.072 0.512 4.096 2.048 5.632 7.168 9.728 13.312 9.728 7.68 0 14.336-6.144 14.336-14.336V56.832C824.32 25.6 799.232 0 767.488 0H141.824c-31.232 0-56.832 25.6-56.832 56.832v725.504c0 31.232 25.6 56.832 56.832 56.832h248.32c7.68 0 14.336-6.144 14.336-14.336 0-4.608-2.56-9.216-6.656-11.776z" fill="#dbdbdb" p-id="5662"></path><path d="M556.032 648.192c58.368-58.368 153.088-58.368 211.456 0 1.536 1.536 3.072 2.048 5.12 2.048 1.536 0 3.584-0.512 5.12-2.048 2.56-2.56 2.56-7.168 0-10.24-63.488-63.488-167.424-63.488-231.424 0-2.56 2.56-2.56 7.168 0 10.24 2.56 2.56 6.656 2.56 9.728 0z" fill="#dbdbdb" p-id="5663"></path><path d="M835.584 900.608c33.28-39.424 53.76-90.624 53.76-146.432 0-125.44-101.888-227.328-227.328-227.328s-227.328 101.888-227.328 227.328 101.888 227.328 227.328 227.328c59.392 0 113.664-23.04 154.112-60.416l98.816 98.816c2.56 2.56 6.144 4.096 10.24 4.096 3.584 0 7.168-1.536 10.24-4.096 5.632-5.632 5.632-14.848 0-19.968l-99.84-99.328z m-174.08-346.112c109.568 0 199.168 89.6 199.168 199.168s-89.6 199.168-199.168 199.168-199.168-89.6-199.168-199.168 89.6-199.168 199.168-199.168zM967.168 99.84c-23.552 0-42.496 18.944-42.496 42.496 0 23.552 18.944 42.496 42.496 42.496 23.552 0 42.496-18.944 42.496-42.496 0.512-23.552-18.944-42.496-42.496-42.496z m0 70.656c-15.872 0-28.672-12.8-28.672-28.672 0-15.872 12.8-28.672 28.672-28.672 15.872 0 28.672 12.8 28.672 28.672 0 16.384-12.8 28.672-28.672 28.672zM56.832 939.008c-23.552 0-42.496 18.944-42.496 42.496 0 23.552 18.944 42.496 42.496 42.496 23.552 0 42.496-18.944 42.496-42.496 0-23.552-18.944-42.496-42.496-42.496z m0 70.656c-15.872 0-28.672-12.8-28.672-28.672 0-15.872 12.8-28.672 28.672-28.672s28.672 12.8 28.672 28.672c-0.512 16.384-13.312 28.672-28.672 28.672z" fill="#dbdbdb" p-id="5664"></path></svg>
            </el-icon>
            <p>暂无新好友添加认证</p>
        </section>
    </section>
</template>

<script setup>
import { ChatMessage } from '@/stores/chat'

const chatState = ChatMessage()
const newRequestList = ref([])

onMounted(() => {
    chatState.getNewRequestFriends()
})
const getRequestList = async () => {
    chatState.getNewRequestFriends()
}

const reauestValidata = async (f, r) => {
    let res = await useMyFetchPostMultipart('/api/chat-friends/request/handle', {
        body: {
            requestId: f.id,
            result: r
        }
    })
    if (r === 2) {
        chatState.getFriendsList()
    }
    newRequestList.value = newRequestList.value.filter(item => item.id != f.id)
    chatState.getNewRequestFriends()
}

defineExpose({ getRequestList })

</script>

<style scoped lang="scss">
.contact-detail-wrapper {
    flex: 1;
    width: 100%;
}

.request-friends-list {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px;

    &:hover {
        background-color: #f3f3f3;
    }
}
</style>